<template>
  <el-card class="me-area" :body-style="{ padding: '16px' }" style="width: 98%;margin: auto;" >
    <div class="me-article-header" >
      <span class="me-article-title">
        <span style="font-size: 18px">成员：{{name}}</span>
      </span>
      <span class="me-pull-right me-article-count" style="color:#000;margin-right: 20px;font-weight: 600;font-size: 14px">
	    	&nbsp;组别：{{group}}
	    </span>
    </div>
    <div class="me-article-header">
      <span class="me-article-description" style="color:#000;font-weight: 600;font-size: 14px">
	    	&nbsp;详细分组：{{group_detail}}
	    </span>
    </div>
    <div class="me-article-footer">
      <span class="me-article-author">
	    	<el-icon><Flag /></el-icon>&nbsp;逆流而上
	    </span>
      <span class="me-pull-right me-article-count">
	    	<el-icon><Promotion /></el-icon>&nbsp;梦想启航
	    </span>
    </div>
  </el-card>
</template>

<script>

import {Flag,Promotion} from '@element-plus/icons'

export default {
  name: "progressItem",
  components: {
    Flag,Promotion
  },
  props: {
    id: String,
    name: String,
    group: String,
    group_detail: String,
  },
  created() {
  },
  data() {
    return {

    }
  },
  methods: {

  },
}
</script>


<style scoped>
.me-article-header {
  /*padding: 10px 18px;*/
  padding-bottom: 10px;
}

.me-article-title {
  font-weight: 600;
}

.me-article-count {
  color: #a6a6a6;
  padding-left: 14px;
  font-size: 13px;
}

.me-pull-right {
  float: right;
}

.me-artile-description {
  font-size: 13px;
  line-height: 24px;
  margin-bottom: 10px;
}

.me-article-author {
  color: #a6a6a6;
  padding-right: 18px;
  font-size: 13px;
}
</style>